<template>
    <div class='pagination' :class="{'has-tool': $slots.default}" v-show='total'>
        <slot></slot>
        <a-pagination
            :total="total"
            :current.sync='currentPage'
            :pageSize.sync='pageSize'
            :pageSizeOptions='pageSizes'
            :show-total="total => `共 ${total} 条`"
            show-size-changer
            show-quick-jumper
            @change='changeIndex'
            @showSizeChange='changeSize'
        />
    </div>
</template>

<script>
export default {
    name: 'Pagination',
    props: {
        total: {
            required: true,
            type: Number
        },
        page: {
            required: true,
            type: Number
        },
        limit: {
            required: true,
            type: Number
        },
        pageSizes: {
            type: Array,
            default () {
                return ['10', '20', '50', '100']
            }
        }
    },
    computed: {
        currentPage: {
            get () {
                return this.page
            },
            set (val) {
                this.$emit('update:page', val)
            }
        },
        pageSize: {
            get () {
                return this.limit
            },
            set (val) {
                this.$emit('update:limit', val)
            }
        }
    },
    methods: {
        changeIndex (page, pageSize) {
            this.currentPage = page
            this.pageSize = pageSize
            this.$emit('pagination', { page, limit: pageSize })
        },
        changeSize (current, size) {
            this.currentPage = current
            this.pageSize = size
            this.$emit('pagination', { page: current, limit: size })
        }
    }
}
</script>

<style scoped lang='less'>
.pagination {
  display:  flex;
  justify-content: flex-end;
  align-items: center;
    height: 50px;
    border-radius: 6px;
    padding-right: 20px;
    background: #fff;
    ::v-deep {
        .ant-pagination-item, .ant-pagination-item-link, .ant-select-selection, .ant-pagination-options-quick-jumper input {
            border: 1px solid rgba(212, 212, 212, .8);
            border-radius: 4px;
        }
        .ant-select-selection:hover {
            border-color: #d15e5a;
        }
        .ant-pagination-options-quick-jumper input:hover {
            border-color: #d15e5a;
        }
        .ant-pagination-item-active {
            background: @primary-color;
            box-shadow: 0 2px 4px rgba(120, 163, 255, 0.3);
            border-radius: 4px;
            a {
                color: #fff;
            }
        }
    }
    &.has-tool {
        display: flex;
        justify-content: space-between;
        align-items: center;
        ::v-deep {
            .pagination-tool {
                display: flex;
                align-items: center;
                .num {
                    font-size: 22px;
                }
                button {
                    margin-left: 10px;
                }
            }
        }
    }
}

::v-deep{
  .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: @primary-color;
    color: #fff;
  }
}
</style>
